<template>
  <div id="panel">
    <p>标签属性</p>
    <div class="box">
      <label for="">内置图片路径</label>
      <select name=" mode" id="url1" v-model="poiObject.url">
        <option value="inner://CameraBlue.png" selected>蓝色相机</option>
        <option value="inner://CameraGreen.png">绿色相机</option>
        <option value="inner://CarBlue.png">蓝色车辆</option>
        <option value="inner://CarRed.png">红色车辆</option>
        <option value="inner://Dukou.png">渡口</option>
        <option value="inner://Jiexian.png">界限</option>
        <option value="inner://Jingshi.png">警示</option>
        <option value="inner://LiaodouBlue.png">蓝色料斗</option>
        <option value="inner://LiaodouRed.png">红色料斗</option>
        <option value="inner://LongmendiaoBlue.png">龙门吊蓝色</option>
        <option value="inner://LongmendiaoRed.png">龙门吊红色</option>
        <option value="inner://Mao.png">锚</option>
        <option value="inner://MenjiBlue.png">蓝色门机</option>
        <option value="inner://MenjiRed.png">红色门机</option>
        <option value="inner://RenyuanBlue.png">蓝色人员</option>
        <option value="inner://RenyuanRed.png">红色人员</option>
        <option value="inner://RenyuanCircleBlue.png">蓝色圆形人员</option>
        <option value="inner://RenyuanCircleRed.png">红色圆形人员</option>
      </select>

      <label for="">渲染模式</label>
      <select name="mode" id="mode1" v-model="poiObject.renderMode">
        <option value="0" selected>单面不透明</option>
        <option value="1">双面不透明</option>
        <option value="2">单面遮罩</option>
        <option value="3">双面遮罩</option>
        <option value="4">单面透明</option>
        <option value="5">双面透明</option>
        <option value="6">单面未遮挡透明</option>
        <option value="7">双面未遮挡透明</option>
      </select>

      <label for="">漫游旋转类型</label>
      <select name="type" id="type1" v-model="poiObject.rotationType">
        <option value="0">固定模式</option>
        <option value="1" selected>面向屏幕旋转</option>
        <option value="2">绕自身Z轴旋转</option>
      </select>
    </div>


    <div class="box1">
      <button @click="rePickPosition">重新拾取位置</button>
      <button @click="startEditing">开启编辑</button>
      <button @click="flyTo">飞行定位</button>
    </div>
  </div>


  <IframeModal :url="modalUrl" :visible="modalVisible" @close="modalVisible = false" />
</template>

<script setup lang="ts">
import IframeModal from './IframeModal.vue';
import { nextTick, onBeforeUnmount, ref } from 'vue';
import { getobjm, getOrCreateSceneObj } from '../scripts/getobjm';
import { ESImageLabel } from 'earthsdk3';

const objm = getobjm();
const poiObject = getOrCreateSceneObj(objm, ESImageLabel, "poiLabel")

const modalVisible = ref(false);
const modalUrl = ref('');

// 开始编辑
function startEditing() {
  if (!poiObject) return
  poiObject.editing = true
}

// 飞行定位
function flyTo() {
  if (!poiObject) return
  poiObject.flyTo()
}

// 重新拾取位置
function rePickPosition() {
  if (!poiObject) return
  poiObject.editing = false
  poiObject.position = [0, 0, 0]
  startEditing()
}

nextTick(() => {
  poiObject.url = "inner://CameraBlue.png";
  poiObject.position = [106.78538, 31.88742, 558.30]

  // 监听widgetEvent事件
  poiObject.allowPicking = true; //允许被拾取
  poiObject.widgetEvent.don((e) => {
    console.log("widgetEvent信息", e, "拾取的可视化对象", poiObject);
    switch (e.type) {
      case "rightClick":
        // 显示 Modal，并在其中嵌入百度页面
        showModal("./data/alarm.mp4");
        break;
      default:
        break;
    }
  });
})

onBeforeUnmount(() => {
  if (!poiObject) return
  poiObject.editing = false
  // poiObject.screenRender = false
})


const showModal = (url: string) => {
  modalUrl.value = url;
  modalVisible.value = true;
  poiObject.editing = false;
};


</script>

<style scoped src="../css/panel.css"></style>
<style scoped>
.box {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 1fr;
  grid-row-gap: 5px;
  margin-bottom: 10px;
}

.box>div {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;

}

.box>div>input {
  width: 88px !important;
}


.box1 {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
}
</style>
